<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <h3>选择爱好:</h3>
    <input type="checkbox" id="txt1"><label for="txt1">爬山<br></label>
    <input type="checkbox" id="txt2"><label for="txt2">爬山<br></label>
    <input type="checkbox" id="txt3"><label for="txt3">爬山<br></label>
    <input type="checkbox" id="txt4"><label for="txt4">爬山<br></label>
    <input type="checkbox" id="txt5"><label for="txt5">爬山<br></label>
    <input type="checkbox" id="txt6"><label for="txt6">爬山<br></label>
    <input type="checkbox" id="txt7"><label for="txt7">爬山<br></label>
    <input type="checkbox" id="txt8"><label for="txt8">爬山<br></label>
    <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
    <button id="btn3">反选</button>
    <script>
        let all = document.getElementById("btn1")
        let no = document.getElementById("btn2")
        let rev = document.getElementById("btn3")
        let inps = document.querySelectorAll("input")
        all.onclick = () => {
            for(let i = 0; i < inps.length; i++){
                inps[i].checked = "checked"
            }
        }
        no.onclick = () => {
            for(let i = 0; i < inps.length; i++){
                inps[i].checked = ""
            }
        }
        rev.onclick = function(){
            for(let i = 0; i < inps.length; i++){
                if(!inps[i].checked){
                    inps[i].checked = "checked"
                }else{
                    inps[i].checked = ""
                }
            }
        }
        
    </script>
</body>
</html>